<template>
    <div class="form">
        <el-container class="container">
            <el-main class="form-main"><div style="margin-top: 300px;"><canvas ref="canvas" id="canvas"></canvas></div></el-main>
            <el-aside class="form-aside">
                <div class="aside-box">
                    <el-alert :title="errMsg" v-if="errorShow" type="error" />
                    <div class="aside-box-content">
                        <div class="login">
                            <el-form v-loading="loading" size="large" label-position="right" label-width="100px"
                                :model="formLogin" style="max-width: 460px">
                                <el-form-item label="账号">
                                    <el-input v-model="formLogin.admin_account" placeholder="请输入邮箱" />
                                </el-form-item>
                                <el-form-item label="密码">
                                    <el-input v-model="formLogin.admin_password" placeholder="请输入密码" type="password"/>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="loginAdminFunc">用户登录</el-button>
                                    &nbsp;&nbsp;
                                    <el-link type="info" href="#/register">去注册</el-link>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>
            </el-aside>
        </el-container>
    </div>
</template>
<style lang="scss">
@import '../../static/style/base.scss';
@import '../../static/style/form.scss';
.form {
    background-image: url(../../assets/bg.jpg) !important;
}
</style>
<script lang="ts" setup>
// 导入定义数据的方法
import { reactive, ref ,nextTick,onMounted,getCurrentInstance } from 'vue'
// 导入登录接口
import { loginAdminApi } from '../../http/request'
// 导入提示组件
import { ElNotification } from 'element-plus'
// 引入创建路由方法
import { useRouter } from 'vue-router'
// 使用路由
const $router = useRouter();
// 记录提示
let errMsg = ref('默认')
// 关闭提示
let errorShow = ref(false)
// 设置正在加载
const loading = ref(false)
// 记录表单的数据
const formLogin = reactive({ admin_account: '', admin_password: '' })
// 编写登录函数
const loginAdminFunc = async () => {
    let { admin_account, admin_password } = formLogin;
    if (admin_account.length == 0 || admin_password.length == 0) {
        errorShow.value = true;
        errMsg.value = '输入框不能为空';
        return false;
    }
    loading.value = true;
    let timeout = setTimeout(() => {
        // 用户登录
        loginAdminApi({ admin_account, admin_password }).then(
            (res: any) => {
                console.log(res)
                if (res.code == 200) {
                        localStorage.setItem('token', res.token);
                        // 界面提示
                        ElNotification({title: '提示',message: res.msg,type: 'success'});
                        // 跳转主页
                        $router.push({path: '/index'})
                    } else {
                        // 界面提示
                        ElNotification({title: '提示',message: res.msg,type: 'error'});
                    }
                loading.value = false;
                clearTimeout(timeout);
            }
        )
    }, 300)
}
// 设置标题
document.title = "管理员登录页面";
</script>
